<template>
    <div class="product_mine">
        <div class="home-index-user">
            <van-image class="home-index-user-image" :src="userInfo?.avatar || basicAvatar" round fit="cover" />
            <div class="home-index-user-info">
                <div class="home-index-user-info-name ellipsis">{{ userInfo?.nickName }}</div>
                <div class="home-index-user-info-dandp flex-row">
                    <div class="topbumen_l ellipsis flex-center">
                        {{ userInfo.dept?.deptName }}
                    </div>
                    <div class="topbumen_r ellipsis flex-center">
                        {{ positionName(userPost) }}
                    </div>
                </div>
            </div>
            <van-image :src="icon_wodetu" class="icon_wodetu"></van-image>
        </div>
        <div class="product_mine_list">
            <div class="frequency_div">
                <div class="frequency_value">
                    <span>{{ merchantNum || 0 }}</span>
                    个
                </div>
                <div class="frequency_label">周入库商品</div>
            </div>
            <div class="frequency_div">
                <div class="frequency_value">
                    <span>{{ addNum || 0 }}</span>
                    个
                </div>
                <div class="frequency_label">周上架商品</div>
            </div>
            <div class="frequency_div">
                <div class="frequency_value">
                    <span>{{ selectionNum || 0 }}</span>
                    个
                </div>
                <div class="frequency_label">周出库商品</div>
            </div>
        </div>
        <div class="operateMine_tabbar">
            <div class="operateMine_tabbar_item">
                <img src="@/assets/operation/icon_shoumaishuju.png" alt="">
                <div class="item_text">售卖数据</div>
            </div>
            <div class="operateMine_tabbar_item" @click="routerTo('/productHome/examineApprove')">
                <img src="@/assets/operation/icon_shenpishuju.png" alt="">
                <div class="item_text">审批数据</div>
            </div>
            <div class="operateMine_tabbar_item" @click="routerTo('/sampleData')">
                <img src="@/assets/operation/icon_paipinshuju.png" alt="">
                <div class="item_text">补样数据</div>
            </div>
        </div>
        <div class="operateMine_back">
            <div class="operateMine_box">
                <div class="box_title">我的卡片</div>
                <div class="box_item" @click="messageClick">
                    <div class="box_item_left">
                        <img class="left_img" src="@/assets/operation/icon_xiaoxizhongxin.png" alt="">
                        消息中心
                    </div>
                    <div class="box_item_right">
                        <span v-if="messageTotal">{{ messageTotal }}</span>
                        <img class="right_img" src="@/assets/operation/icon_huisejiantou.png" alt="">
                    </div>
                </div>
                <div class="box_item" @click="routerTo('/profile')">
                    <div class="box_item_left">
                        <img class="left_img" src="@/assets/operation/icon_gerenzhongxin.png" alt="">
                        个人信息
                    </div>
                    <div class="box_item_right">
                        <img class="right_img" src="@/assets/operation/icon_huisejiantou.png" alt="">
                    </div>
                </div>
                <div class="box_item" @click="routerTo('/feedback')">
                    <div class="box_item_left">
                        <img class="left_img" src="@/assets/operation/icon_jianyiyufankui.png" alt="">
                        建议与反馈
                    </div>
                    <div class="box_item_right">
                        <img class="right_img" src="@/assets/operation/icon_huisejiantou.png" alt="">
                    </div>
                </div>
                <div class="box_item" @click="routerTo('/setIndex')">
                    <div class="box_item_left">
                        <img class="left_img" src="@/assets/operation/icon_shezhi.png" alt="">
                        设置
                    </div>
                    <div class="box_item_right">
                        <img class="right_img" src="@/assets/operation/icon_huisejiantou.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'
import { getInfo } from "@/api/supplierList/index";
import { queryDeptCount, getWeekData } from '@/api/operation/index'
const basicAvatar = new URL("@/assets/newui/home/basicAvatar.png", import.meta.url).href;
const icon_wodetu = new URL("@/assets/newui/home/icon_wodetu@2x.png", import.meta.url).href;
const userInfo = ref<any>({});
const userPost = ref<any>([]);
const router = useRouter()
// 周入库商品
const merchantNum = ref()
// 周上架商品
const addNum = ref()
// 周出库商品
const selectionNum = ref()
// 消息数量
const messageTotal = ref()
const getList = async () => {
    const res = await getInfo();
    userInfo.value = res.data.user;
    userPost.value = res.data.posts || []
}
const getCountNotReadMsg = async () => {
    // 获取消息数量
    const { data } = await queryDeptCount({})
    messageTotal.value = Number(data?.readCount) + Number(data?.waitCount)
    // 获取周统计数量
    const { weekIn, weekOn, weekOut } = await getWeekData({});
    [merchantNum.value, addNum.value, selectionNum.value] = [weekIn, weekOn, weekOut];
}
getCountNotReadMsg()
// 反显职位权限名称
const positionName = (data: any) => {
    let name: any = []
    data.forEach((item: any) => {
        name.push(item.postName)
    })
    return name.join('/')
}
const routerTo = (url: string) => {
    router.push({
        path: url,
    })
}
const messageClick = () => {
    router.push({
        path: `/notice`,
        query: {
            type: '产品部'
        }
    });
}
onMounted(() => {
    getList()
})
</script>
<style lang="less" scoped>
.product_mine {
    width: 100%;
    height: calc(100vh - 50px);
    background: #F6FAFF;
    position: relative;

    .home-index-user {
        display: flex;
        position: relative;
        width: 100%;
        height: 190px;
        background: url('@/assets/newui/home/icon_wodebeijing@2x.png');
        box-sizing: border-box;
        padding: 56px 12px;

        .home-index-user-image {
            width: 60px;
            height: 60px;
            border: 2px solid #fff;
            flex-shrink: 0;
        }

        .home-index-user-info {
            margin-left: 10px;
            margin-top: 7px;
            width: 0;
            flex: 1;

            .home-index-user-info-name {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 16px;
                line-height: 16px;
                color: #1A1B1C;
                text-align: left;
                font-style: normal;
                max-width: 200px;
            }

            .home-index-user-info-dandp {
                margin-top: 10px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 14px;


                .topbumen_l {
                    height: 22px;
                    width: 108px;
                    line-height: 22px;
                    color: #1881FF;
                    position: relative;
                    background: url("@/assets/newui/home/icon_bumen@2x.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                }

                .topbumen_r {
                    font-family: FontName;
                    height: 22px;
                    width: 92px;
                    line-height: 22px;
                    color: #FFFFFF;
                    position: relative;
                    background: url("@/assets/newui/home/icon_mingcheng@2x.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    margin-left: -6px;

                }
            }
        }

        .icon_wodetu {
            position: absolute;
            top: 56px;
            right: 12px;
            width: 60px;
            height: 60px;
        }
    }

    .product_mine_list {
        width: 345px;
        height: 76px;
        background: url('@/assets/newui/home/icon_lanzisebeijing@2x.png');
        position: absolute;
        left: 15px;
        top: 140px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;

        .frequency_div {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            width: calc(100% / 3);
            text-align: center;
        }

        .frequency_label {
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            width: 100%;
        }

        .frequency_value {
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            width: 100%;

            span {
                font-weight: 600;
                font-size: 28px;
            }
        }
    }

    .operateMine_tabbar {
        width: 345px;
        height: 95px;
        margin: 0 15px;
        background: #FFFFFF;
        border-radius: 5px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: absolute;
        top: 230px;

        .operateMine_tabbar_item {
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;

            img {
                width: 28px;
                height: 28px;
                margin-bottom: 14px;
            }

            .item_text {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
            }
        }
    }

    .operateMine_back {
        box-sizing: border-box;
        position: absolute;
        top: 335px;
        width: 345px;
        height: 245px;
        background: #FFFFFF;
        border-radius: 5px;
        margin: 0 15px;

        .operateMine_box {
            width: 100%;
            background: #fff;
            border-radius: 5px;
            padding: 15px;
            box-sizing: border-box;

            .box_title {
                margin-bottom: 28px;
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
            }

            .box_item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 0;
                box-sizing: border-box;

                .box_item_left {
                    display: flex;
                    align-items: center;

                    .left_img {
                        width: 20px;
                        height: 20px;
                        margin-right: 13px;
                    }
                }

                .box_item_right {
                    display: flex;
                    align-items: center;

                    span {
                        width: 28px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        background: #FC2540;
                        border-radius: 10px;
                        margin-right: 15px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                    }

                    .right_img {
                        width: 7px;
                        height: 12px;
                    }
                }
            }
        }
    }
}
</style>